<template>
	<el-main>
		<el-card shadow="never">
			<el-form label-width="100">
				<el-row :gutter="12">
					<el-col :span="8">
						<el-form-item label="学员姓名">
							<el-input placeholder="请输入学员姓名" v-model="searchForm.selectName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="学员电话">
							<el-input placeholder="请输入学员电话" v-model="searchForm.mobile"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-button @click="getPoolPageData" type="primary" icon="Search">搜索</el-button>
						<el-button @click="resetForm" icon="RefreshRight">重置</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card shadow="never" style="margin-top: 10px;">
			<el-button @click="receiveBatch" type="warning" style="margin-bottom: 5px;">批量领取</el-button>
			<XlxClientTable v-model:tableDom="tableDom" v-model:currentPage="searchForm.current"
				v-model:pageSize="searchForm.size" :data="consultList" type="selection" :totals="totals"
				@getData="getPoolPageData">
				<template #="{ row }">
					<el-link @click="router.push({ path: '/recruit/consult/detail', query: { id: row.id } })"
						:underline="false" type="primary" icon="Tickets">查看详情</el-link>
					<el-link @click="receiveClient(row.id)" :underline="false" type="primary"
						icon="Pointer">领取客户</el-link>
				</template>
			</XlxClientTable>
		</el-card>
	</el-main>
</template>

<script setup lang="ts">
import { getPoolPageApi, getPoolReceiveApi, postPoolReceiveBatchApi } from '@renderer/api/recruit';
import { RecruitItem, SearchRecruit } from '@renderer/interface/recruit';
import router from '@renderer/router';
import { onMounted, ref } from 'vue';

const searchForm = ref<SearchRecruit>({
	current: 1,
	size: 5,
	selectName: '',
	mobile: ''
})
const resetForm = () => {
	searchForm.value = {
		current: 1,
		size: 5,
		selectName: '',
		mobile: ''
	}
	getPoolPageData()
}
const totals = ref(0)
const consultList = ref<RecruitItem[]>([])
const getPoolPageData = async () => {
	const { code, data } = await getPoolPageApi(searchForm.value)
	if (code !== '200') return

	consultList.value = data.records
	consultList.value.forEach(item => {
		item.purpose = Number(item.purpose)
	})
	totals.value = data.total
}
// 查看详情
// 领取客户
const receiveClient = async (id: string) => {
	const { code } = await getPoolReceiveApi(id)
	if (code !== '200') return

	ElMessage.success('领取客户成功~')
	getPoolPageData()
}
const tableDom = ref()
// 批量领取
const receiveBatch = async () => {
	const selectedArr = tableDom.value.getSelectionRows().map(item => item.id)
	const { code } = await postPoolReceiveBatchApi(selectedArr)
	if (code !== '200') return

	ElMessage.success('批量领取客户成功~')
	getPoolPageData()
}

onMounted(() => {
	getPoolPageData()
})
</script>

<style scoped></style>